<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :title="dialogProps.title" width="660px">
    <el-form
      ref="ruleFormRef"
      :disabled="dialogProps.isView"
      :hide-required-asterisk="dialogProps.isView"
      label-suffix=" :"
      label-width="120px"
      :model="dialogProps.row"
      :rules="rules"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="交班处理" prop="isClassOff">
            <el-radio-group v-model="dialogProps.row!.isClassOff">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="退菜处理" prop="isFoodRefund">
            <el-radio-group v-model="dialogProps.row!.isFoodRefund">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="菜品打折" prop="isFoodDiscount">
            <el-radio-group v-model="dialogProps.row!.isFoodDiscount">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="整单打折" prop="isAllDiscount">
            <el-radio-group v-model="dialogProps.row!.isAllDiscount">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="补票打印" prop="isPrintRepair">
            <el-radio-group v-model="dialogProps.row!.isPrintRepair">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="系统设置" prop="isSysSetup">
            <el-radio-group v-model="dialogProps.row!.isSysSetup">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="新增菜品" prop="isAddFoodInfo">
            <el-radio-group v-model="dialogProps.row!.isAddFoodInfo">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 占位start
          <el-form-item>
            <div></div>
          </el-form-item>
          <el-form-item>
            <div></div>
            占位end -->
          <el-form-item label="最大优惠额" prop="maxReduceAmount">
            <el-input-number v-model="dialogProps.row!.maxReduceAmount" clearable :controls="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="赠送菜品" prop="isFoodGift">
            <el-radio-group v-model="dialogProps.row!.isFoodGift">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="会员充值" prop="isUserDeposit">
            <el-radio-group v-model="dialogProps.row!.isUserDeposit">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="反结帐处理" prop="isSettlementUn">
            <el-radio-group v-model="dialogProps.row!.isSettlementUn">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="会员充值退款" prop="isUserDepositRefund">
            <el-radio-group v-model="dialogProps.row!.isUserDepositRefund">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="数据清理" prop="isClearData">
            <el-radio-group v-model="dialogProps.row!.isClearData">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="新增会员" prop="isAddUserInfo">
            <el-radio-group v-model="dialogProps.row!.isAddUserInfo">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="最大折扣" prop="maxDiscountValue">
            <el-input-number v-model="dialogProps.row!.maxDiscountValue" clearable :controls="false" />
          </el-form-item>
          <el-form-item>
            <div style="color: #999999">说明：90表示9折。</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button v-show="!dialogProps.isView" type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="RoleDialog">
import { ElMessage, FormInstance } from 'element-plus'
import { reactive, ref } from 'vue'
import { User } from '~/src/api/interface/user'

const rules = reactive({
  isClassOff: [{ required: true, message: '交班处理必选' }],
})

interface DialogProps {
  title: string
  isView: boolean
  row: Partial<User.RoleAuthority>
  api?: (params: any) => Promise<any>
  getTableList?: () => void
}

const dialogVisible = ref(false)
const dialogProps = ref<DialogProps>({
  isView: false,
  title: '',
  row: {},
})

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params
  dialogVisible.value = true
}

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>()
const handleSubmit = () => {
  ruleFormRef.value!.validate(async (valid) => {
    if (!valid) return
    try {
      await dialogProps.value.api!(dialogProps.value.row) // 当前组件的刷新数据
      ElMessage.success({ message: `${dialogProps.value.title}成功！` })
      dialogVisible.value = false
    } catch (error) {
      console.log(error)
    }
  })
}

defineExpose({
  acceptParams,
})
</script>
